<template>
  <div class="sell-tracking">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">政企专题 - {{name}}</div>
      </div>
    </div>
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="50px" class="formList">
        <el-form-item label>
          <el-input v-model="form.queryName" placeholder="请输入关键词查找" clearable style="width:100%"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="submitHandle()">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="tableBox" ref="tableWrap" style="marginTop:10px">
        <el-table :data="tableData" stripe size="mini" class="tableTh28" border v-loading="tableLoading" max-height="420">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            v-for="(item,index) in clounms"
            :key="index"
            :width="item.width"
            :minWidth="item.minWidth"
            :align="item.align"
            :sortable="item.sortable"
            :render-header="item.renderHeader"
          >
            <template slot-scope="scope">
              <template v-if="item.slot">
                <template v-if="item.slot=='formName'">
                  <span>
                    <a :href="scope.row.formUrl" target="_balnk" :style="{color:'#3187F7'}">{{scope.row.formName}}</a>
                  </span>
                </template>
              </template>

              <template v-else>
                <span>{{ scope.row[item.prop]}}</span>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { createSpanOne } from "@/utils/mixin.js";
import prefixAPI from "@/api/prefixAPI";
export default {
  data() {
    return {
      tableLoading: false, //

      tableData: [],

      form: {
        queryName: "",
        areaId: ''
      },
      clounms: [
        {
          label: "报表编号",
          prop: "formId",
          width: "100",
          align: "center",
        },
        {
          label: "报表名称",
          prop: "formName",
          minWidth: "150",
          align: "left",
          slot: "formName",
        },
        {
          label: "需求人",
          prop: "requirName",
          width: "100",
          align: "center",
        },
        {
          label: "需求部门",
          prop: "depName",
          minWidth: "100",
          align: "left",
        },
        {
          label: "报表需求描述",
          prop: "requirDesc",
          minWidth: "150",
          align: "left",
        },
        {
          label: "报表更新周期",
          prop: "updateTime",
          minWidth: "100",
          align: "center",
        },
        {
          label: "上线时间",
          prop: "publishDate",
          minWidth: "100",
          align: "center",
        },
      ],
      name: ''
    };
  },
  watch: {
    $route: {
        handler() {
            this.form.areaId = this.$route.query.code
            if (this.$route.query.code == '1') {
                this.name = '省政企'
            } else if (this.$route.query.code == '4') {
                this.name = '温州政企'
            } else if (this.$route.query.code == '9') {
                this.name = '湖州政企'
            } else if (this.$route.query.code == '2') {
                this.name = '杭州政企'
            } else if (this.$route.query.code == '3') {
                this.name = '宁波政企'
            } else if (this.$route.query.code == '5') {
                this.name = '嘉兴政企'
            } else if (this.$route.query.code == '7') {
                this.name = '金华政企'
            } else if (this.$route.query.code == '8') {
                this.name = '台州政企'
            } else if (this.$route.query.code == '10') {
                this.name = '丽水政企'
            } else if (this.$route.query.code == '11') {
                this.name = '舟山政企'
            } else if (this.$route.query.code == '12') {
                this.name = '衢州政企'
            } else if (this.$route.query.code == '32518') {
                this.name = '绍兴政企'
            }
            this.getYouDataList();
        },
        deep: true,
    }
  },
  created() {
    this.form.areaId = this.$route.query.code
    if (this.$route.query.code == '1') {
        this.name = '省政企'
    } else if (this.$route.query.code == '4') {
        this.name = '温州政企'
    } else if (this.$route.query.code == '9') {
        this.name = '湖州政企'
    } else if (this.$route.query.code == '2') {
        this.name = '杭州政企'
    } else if (this.$route.query.code == '3') {
        this.name = '宁波政企'
    } else if (this.$route.query.code == '5') {
        this.name = '嘉兴政企'
    } else if (this.$route.query.code == '7') {
        this.name = '金华政企'
    } else if (this.$route.query.code == '8') {
        this.name = '台州政企'
    } else if (this.$route.query.code == '10') {
        this.name = '丽水政企'
    } else if (this.$route.query.code == '11') {
        this.name = '舟山政企'
    } else if (this.$route.query.code == '12') {
        this.name = '衢州政企'
    } else if (this.$route.query.code == '32518') {
        this.name = '绍兴政企'
    }
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));

    this.getYouDataList();
  },
  methods: {
    submitHandle() {
      this.getYouDataList();
    },

    getYouDataList() {
      const { form } = this;
      this.tableLoading = true;
      $budgetAPI.getYouDataList(
        { ...form },
        (res) => {
          this.tableLoading = false;
          if (res && res.code == 0) {
            // console.log(res);
            this.tableData = res.content;
          } else {
            this.$message.error(res.message);
          }
        },
        (err) => {
          this.tableLoading = false;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.sell-tracking {
  .daochu {
    float: right;
    .el-form-item__content {
      float: right;
      .el-button {
        float: right;
      }
    }
  }
}
/deep/ .el-form-item {
  .el-form-item__content {
    width: 100%;
  }
}
</style>
